<script type="text/javascript">
$(document).ready(function () {
	$("#tenbuoibieudien").jqxInput({ theme: theme, height: 25, width: 240, placeHolder: "Tên buổi biểu diễn"});
	$("#ngaydien").jqxDateTimeInput({ theme: theme, height: 22, width: 160 });
        
        $("#giodien").jqxMaskedInput({ width: 240, height: 25, mask: '##:##', theme: theme });
        $("#thoigiandien").jqxInput({ theme: theme, height: 25, width: 240, placeHolder: "Thời gian diễn" });
        $("#chitietthem").jqxInput({ theme: theme, height: 150, width: 520, placeHolder: "Chi tiết thêm về buổi diễn" });
	$("#diadiemdien").jqxInput({ theme: theme, height: 100, width: 240, placeHolder: "Nơi diễn" });
	$("#buoibieudien_thongtin").jqxValidator({ 
            focus: true,
            rules: [
                { input: '#tenbuoibieudien', message: 'Không được để trống', action: 'keyup, blur', rule: 'required' },
                { input: '#giodien', message: 'Không được để trống', action: 'keyup, blur', rule: 'required' },
                { input: '#thoigiandien', message: 'Không được để trống', action: 'keyup, blur', rule: 'required' },
                { input: '#chitietthem', message: 'Không được để trống', action: 'keyup, blur', rule: 'required' },
                { input: '#diadiemdien', message: 'Không được để trống', action: 'keyup, blur', rule: 'required' },
                { input: '#ngaydien', message: 'Ngày diễn phải nhỏ hơn năm hiện tại!', action: 'valuechanged', rule: function(input, commit){
                    var date = $('#ngaydien').jqxDateTimeInput('value');
                    //phai tra ve gia tri dung
                    var result = (date.getFullYear() <= new Date().getFullYear());
                    // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                    return result;
                }}
                
            ]
        });
        $('#buoibieudien_thongtin').on('validationSuccess', function (event) {
            $('#buoibieudien_thongtin').data("isSuccess", true);
        });
        $('#buoibieudien_thongtin').on('validationError', function (event) {
            $('#buoibieudien_thongtin').data("isSuccess", false);
        });
        
        var options = { 
        complete: function(response) 
        {
            console.log("Da up hinh len server");
        },
        error: function()
        {
            console.log("Khong the up hinh len server");
        }
        }; 

        $("#buoibieudien_poster_upload_form").ajaxForm(options);
});
</script>
<table>
    <tr>
        <td style="">
            <div id="buoibieudien_poster_tool" style="width: 185px">
                <img src="#" height="165" width="165" id="buoibieudien_poster"/>
                <form id="buoibieudien_poster_upload_form" action="controllers/buoibieudien_poster_uploader.php" method="post" enctype="multipart/form-data">
                    <input type='file' onchange="readURL(this, 'buoibieudien_poster');" id="buoibieudien_poster_file" accept="image/*" name="poster"/>
                    <input type="hidden" id="ma_buoibieudien" value="" name="ma_buoibieudien"/>
                </form>
            </div>
        </td>
        <td style="vertical-align: top">
            <table>
            <form id="buoibieudien_thongtin">
                <tr>
                    <td colspan="2"><div style="color: red; text-align: center"><strong><h3>Thông Tin Show Diễn</h3></strong></div></td>
                </tr>
                <tr>
                    <td>Tên show: </td>
                    <td><input type="text" id="tenbuoibieudien"/></td>
                </tr>
                <tr>
                    <td>Địa điểm: </td>
                    <td><input type="text" id="diadiemdien"/></td>
                </tr>
                <tr>
                    <td>Ngày diễn: </td>
                    <td><div id="ngaydien"></div></td>     
                </tr>
                <tr>
                    <td>Giờ diễn: </td>
                    <td><input id="giodien"></td>
                </tr>
                <tr>
                    <td>Thời lượng</td>
                    <td><input type="text" id="thoigiandien"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><div id="vedaban"></div><br></td>
                </tr>
             </table>
        </td>
    </tr>
    <tr><td colspan="2"><input type="text" id="chitietthem"/></td></tr>
</form>
</table>

